<template>
	<view v-if="isLogin==true">
		<view class="cflex-r sticky-top"
			style="justify-content: center;align-items: center;height: 76rpx;background-color: white;">
			<view class="cflex-c" style="flex: 1;justify-content: center;align-items: center;" @tap="onTabClick(index)"
				v-for="(item,index) in tabLists" :key="'A'+index">
				<view :style="{color:item.isSelect?'#333333':'#999999',fontWeight:item.isSelect?'bold':'normal'}">
					{{item.text}}
				</view>
				<view :style="{opacity:item.isSelect?1:0}" class="cbg-zhuti u-m-t-2" style="height: 8rpx;width: 60rpx;">
				</view>
			</view>
		</view>

		<!-- 从这里开始为3个页订单页面展示在一起 -->
		<view v-show="!noData" class="cflex-c cbg-white u-m-l-20 u-m-r-20 u-p-l-20 u-p-r-20 u-m-t-20 u-p-b-30"
			style="border-radius: 15rpx;" v-for="(item,index) in lists" :key="index">
			<view class="cflex-r" style="justify-content: space-between;align-items: center;">
				<view class="cflex-r " @tap="goInfo(item.wid)"
					style="height: 90rpx;justify-content: center;align-items: center;">
					<image :src="item.wAvatar" style="width:45rpx;border-radius: 50%;height: 45rpx;" mode="aspectFill">
					</image>
					<view class="u-m-l-15" style="color: #666666 ;">
						{{item.wName}}
					</view>
					<view class="u-m-l-10" style="color: #666666 ;">
						{{item.wSex == 2 ? '女':'男'}}
					</view>
				</view>
				<view :style="{color:item.status==7? '#656565': '#FF5400'}">
					{{item.params.statusDes}}
				</view>
			</view>
			<view style="height: 1rpx;border: 1rpx solid rgb(240,240,240);">
			</view>
			<view class="u-m-t-20 cflex-r" @tap="goDetail(item)">
				<view>
					<image mode="aspectFill" :src="item.iPhoto"
						style="width:128rpx;border-radius: 16rpx;height: 128rpx;"></image>
				</view>
				<view class="cflex-c u-m-l-20">
					<view class="u-font-16" style="font-weight: bold;color: #333333;">{{item.iName}}</view>
					<view class="cflex-r u-m-t-5 u-font-14">
						<view style="color: #333333;">
							{{item.itemTypeName}}
						</view>
					</view>
					<view class="cflex-r u-m-t-5 u-font-14">
						<view >
							总价{{item.totalPrice}}元，优惠{{item.youHuiPrice}}元
						</view>
						<view style="color: #333333;margin-left:10rpx;">
							实付{{item.realPrice}}元
						</view>
					</view>
					<view  v-if="item.itemTypeCode =='hospital_care'">
						<view class="cflex-r u-m-t-5 u-font-14" >
							<view>
								{{item.hname}}，科室{{item.beCareName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class=""
				style="display: flex;justify-content: space-between;width: 100%;margin-top:30rpx;align-items: center;">
				<view class="u-m-t-5 u-font-14" :style="{color:item.status==7?'#616161':'#FB8500'}"
					@click="dakai(item,item.params.statusDes)">
					{{item.params.statusDes=='服务完成'?'服务时间':'查看预约时间'}}
				</view>
				<view v-if="item.status==9" class="cflex-r" style="justify-content: flex-end;">
					<view v-if="item.isPingJia == 0" class="u-m-r-15 cflex-r" style="width:170rpx;justify-content:center;align-items: center;
					padding:7rpx 0px;border:1px rgb(112,112,112) solid;border-radius:40rpx;" @tap="goDetail(item)">评价</view>
					<view class="cflex-r" style="width:170rpx;justify-content:center;align-items:center;
					padding:7rpx 0px;color:rgb(255,84,0);border:1px rgb(255,84,0) solid;border-radius:40rpx;" @tap="goInfo(item.wid)">
						再来一单</view>
				</view>
				<view v-if="item.status < 3" class="cflex-r" style="justify-content: flex-end;">
					<view @tap="goDetail(item)" class="u-m-r-10"
						style="border: 2rpx solid #5F5F5F; width: 200rpx;color: #5F5F5F;text-align: center;border-radius: 20px;padding: 10rpx;">
						取消订单</view>
					<view v-if="item.status == 0" class="cflex-r" style="width:170rpx;justify-content:center;align-items:center;
					padding:7rpx 0px;color:rgb(255,84,0);border:1px rgb(255,84,0) solid;border-radius:40rpx;" @tap="goPay(item)">去支付
					</view>
				</view>
				<!-- <view v-if="item.status == 9" class="cflex-r" style="justify-content: flex-end;">
					<view @tap="goFish(item)" class="u-m-r-10"
						style="border: 2rpx solid #5F5F5F; width: 200rpx;color: #5F5F5F;text-align: center;border-radius: 20px;padding: 10rpx;">
						订单已完成</view>
				</view> -->
			</view>

			<view class="" style="margin-top: 20rpx;color: #FB8500;" v-if="item.note==1">
				<view class="" v-for="(item2,y) in item.orderTimeList">
					<span style="margin-right: 15rpx;">{{item2.day}}</span>
					<span>{{item2.startTime}}-{{item2.endTime}}</span>
				</view>
				<view style="text-align: center;color: #FB8500;margin-top: 20rpx;" @click="shouhui(item)">
					<u-icon name="arrow-up" color="#FB8500" size="28"></u-icon>
					<span style="margin-left: 10rpx;"> 收起</span>
				</view>
			</view>


		</view>

		<!-- 从这里结束为3个订单页面 -->
		<view v-show="!noData" class="u-p-20"><u-loadmore :status="status" /></view>

		<!-- 没有数据时显示 -->
		<view v-show="noData" class="cflex-c" style="justify-content: center;align-items: center;">
			<image src="../static/queSheng.png" mode="aspectFill" style="width: 100%;"></image>
			<text style="font-weight: bold;margin-top: 50rpx;font-size: 32rpx;">暂无数据，快去下单吧</text>
		</view>

	</view>

	<!-- 未登录状态 -->
	<view v-else>
		<view class="cflex-c-c">
			<image src="../static/queSheng.png" mode="aspectFill" style="width: 100%;"></image>
			<text class="u-m-t-30" style="font-size: 36rpx;color: #606367;">暂未登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jsCode: '',
				isLogin: false,
				noData: false,
				type: 0,
				pages: {
					pageNo: 1,
					pageSize: 20
				},
				tabLists: [{
						id: 0,
						text: '全部订单',
						isSelect: true
					},
					{
						id: 1,
						text: '进行中',
						isSelect: false
					},
					{
						id: 9,
						text: '待评价',
						isSelect: false
					},
					{
						id: 3,
						text: '取消/售后',
						isSelect: false
					},
				],
				tabCurrentIndex: 0,
				lists: [],
				status: 'loading',
			}
		},
		onShow() {
			let isLogin = this.$store.state.isLogin;
			this.isLogin = isLogin;
			if (isLogin == true) {
				this.pages.pageNo = 1;
				this.orderReq();
			} else {

			}
		},
		onLoad() {

		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.orderReq();
		},
		computed: {
			statuBarHeight() {
				return this.$store.state.sysInfo.statusBarHeight;
			}
		},
		methods: {
			goFish(e){
				// this.$request("worker/order/changeOrderStatus",{orderId:e.id,status:9}).then(res=>{
				// 	this.pages.pageNo = 1;
				// 	this.orderReq();
				// })
			},
			shouhui(e){
				e.note = 2
			},
			dakai(e, i) {
					e.note = 1
			},
			goCancel() {

			},
			goPay(item) {
				var orderSn = item.orderSn
				if (item.payType == 3) {
					var jsCode = uni.getStorageSync("jsCode");
					this.$request("pay/xiaoChengXuPay", {
						orderSn: orderSn,
						jsCode: jsCode
					}).then(res => {
						//console.log("去支付=====>",res);
						wx.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							success(res) {
								//console.log("成功=====>",res);
								uni.reLaunch({
									url: "../../pages/tab3"
								})
							},
							fail(err) {
								//console.log("失败=====>",err);
								uni.showToast({
									title: '用户取消支付',
									icon: 'none',
									success() {
										uni.reLaunch({
											url: "../../pages/tab3"
										})
									}
								})
							}
						})
					})

				}

				if (item.payType == 1) {
					this.$request("pay/weiXinPay", {
						orderSn: orderSn,
						ip: this.$store.state.ip
					}).then(res1 => {
						//console.log("pay=========>",res1);
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: JSON.stringify(res1.data), //微信订单数据
							success: function(res) {
								uni.reLaunch({
									url: "../../pages/tab3",
									fail(err) {}
								})
								// //console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								uni.showToast({
									title: '用户取消支付',
									icon: 'none',
									success() {
										uni.reLaunch({
											url: "../../pages/tab3"
										})
									}
								})
								// //console.log('fail:' + JSON.stringify(err));
							}
						});

					})
				}

				//支付宝支付
				if (item.payType == 2) {
					this.$request("pay/zhiFuBaoPay", {
						orderSn: orderSn
					}).then(res1 => {
						//console.log("zhifubao=========>",res1);
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res1.data, //支付宝订单数据
							success: function(res) {
								uni.reLaunch({
									url: "../../pages/tab3",
									fail(err) {}
								})
								// // //console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								uni.showToast({
									title: '用户取消支付',
									icon: 'none',
									success() {
										uni.reLaunch({
											url: "../../pages/tab3"
										})
									}
								})
								// //console.log('fail:' + JSON.stringify(err));
							}
						});

					})
				}

			},
			orderReq() {
				this.status = "loading";
				let statu = this.tabLists[this.tabCurrentIndex].id;
				// // //console.log(status);
				this.$request("kehu/order/orderList", {
					type: statu,
					pageNo: this.pages.pageNo,
					pageSize: this.pages.pageSize
				}).then(res => {
					//console.log(res);
					let tempLists = res.data == null ? [] : res.data;
					if (this.pages.pageNo == 1) {
						this.lists = [];
					}
					this.lists = this.lists.concat(tempLists);

					if (tempLists.length < this.pages.pageSize) {
						this.status = "nomore";
					}
					this.pages.pageNo = this.pages.pageNo + 1;


					if (this.lists.length <= 0) {
						this.noData = true;
					} else {
						this.noData = false;
					}
				})
			},
			goInfo(id) {
				uni.navigateTo({
					url: '../pagesB/jishi/jishi_info?id=' + id
				})
			},
			goDetail(item) {
				
				let id = item.id
				uni.navigateTo({
					url: `../pagesB/order/order_detail?id=${id}`
				})
			},
			onTabClick(index) {
				this.tabLists[this.tabCurrentIndex].isSelect = false;
				this.tabLists[index].isSelect = true;
				this.tabCurrentIndex = index;
				this.pages.pageNo = 1;
				this.orderReq();
			}
		}
	}
</script>

<style>
	.sticky-top {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 2;
	}
</style>